<div class="content-section implementation">
  <div class="list">
    <div>
      <lv-progress [lvValue]="60" [lvExtra]="extraTpl" lvShowLabel="false"></lv-progress>
    </div>

    <div>
      <lv-progress [lvValue]="60" lvType="dashed" [lvExtra]="extraDashedTpl" lvShowLabel="false"></lv-progress>
    </div>
  </div>
</div>

<ng-template let-data #extraTpl>
  <div style="position: absolute; left: 0; top: 0; width: 80%; height: 100%; border-right: 0.01rem solid red"></div>
  <div style="position: absolute; left: 0; bottom: 0.08rem; width: 100%; height: 0.22rem; line-height: 0.22rem; text-align: right">
    Current:{{ data }}%, Threshold:80%
  </div>
</ng-template>

<ng-template let-data #extraDashedTpl>
  <div
    style="
      display: flex;
      justify-content: space-between;
      align-content: flex-end;
      position: absolute;
      left: 0;
      bottom: 0.16rem;
      width: 100%;
      line-height: 0.36rem;
    "
  >
    <h3 style="font-size: 0.24rem; font-weight: 400">Dorado_18500_V6_03</h3>
    <span style="font-size: 0.18rem; font-weight: 700">{{ data }}</span>
  </div>
</ng-template>
